<template>
    <div>
        <headers></headers>
         <van-row>
             <!-- <van-col span="4"> -->
              <!-- <left></left> -->
            <!-- </van-col> -->
            <van-col span="24">
                <h1>查看我的公告</h1>
                <van-button @click="tianjia" style="width: 100px;background-color: aqua;border: 1px">+  新增</van-button>
                <el-table :data="messagelist" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="180" />
                    <el-table-column prop="title" label="标题" width="180" />
                    <el-table-column prop="type" label="消息类型" />
                    <el-table-column prop="username" label="发布人"/>
                    <el-table-column prop="priority" label="优先级" />
                    <el-table-column prop="designate" label="通告对象" />
                    <el-table-column prop="status" label="状态" />
                    <el-table-column prop="userlist" label="执行人" />
                    <el-table-column prop="stime" label="发布时间" />
                    <el-table-column label="操作" />
                    <!-- <el-button @click="exit">关闭</el-button> -->
                    <!-- <router-link>查看详情</router-link> -->
                </el-table>
                <el-dialog v-model="outerVisible" title="新增" width="60%">
                <h1>发布通知</h1>
                <van-row>
                    <van-col span="4"></van-col>
                    <van-col span="20">
                        <div >
                            <el-form>
                                <el-form-item label="标题" style="padding-left: 30px">
                                <el-input placeholder="请输入标题" v-model="form.title" style="width: 400px;"/>
                                </el-form-item>

                                <el-form-item label="开始时间">
                                <el-date-picker v-model="form.stime" type="date" placeholder="请选择开始时间"  style="width: 400px;"  value-format="YYYY-MM-DD">
                                </el-date-picker>

                                </el-form-item>


                                <el-form-item label="优先级" style="padding-left: 15px">
                                <el-select v-model="form.priority" placeholder="请选择优先级"  style="width: 400px;">
                                    <el-option label="低" value="1"></el-option>
                                    <el-option label="中" value="2"></el-option>
                                    <el-option label="高" value="3"></el-option>
                                </el-select>
                                </el-form-item>


                                <el-form-item label="指定用户" v-if="form.designate==1">
                                <el-input placeholder="请选择用户" v-model="form.userlist" style="width: 400px;" @click="userlists"/>
                                </el-form-item>
                                <el-form-item v-else>
                                </el-form-item>
                            </el-form>
                        </div>
                    </van-col>


                    <van-col>
                        <div style="padding-left: 100px">
                            <el-form>
                                <el-form-item label="消息类型">
                                <el-select v-model="form.type" placeholder="请选择消息类型" style="width: 400px">
                                    <el-option label="通知公告" value="1"></el-option>
                                    <el-option label="系统消息" value="2"></el-option>
                                </el-select>
                                </el-form-item>

                                <el-form-item label="结束时间">
                                <el-date-picker v-model="form.etime" type="date" placeholder="请选择结束时间" style="width: 400px" value-format="YYYY-MM-DD">
                                </el-date-picker>

                                </el-form-item>


                                <el-form-item label="通告类型">
                                <el-select v-model="form.designate" placeholder="请选择通告类型" style="width: 400px">
                                    <el-option label="指定用户" value="1"></el-option>
                                    <el-option label="全体用户" value="2"></el-option>
                                </el-select>
                                </el-form-item>
                            </el-form>

                            </div>
                    </van-col>
                </van-row>
                    <div>
                  <el-form>
                    <el-form-item label="内容" style="padding-left: 25px">
                      <el-input
                          v-model="form.content"
                          :rows="10"
                          type="textarea"
                          placeholder="Please input"
                      />
                    </el-form-item>
                  </el-form>
                  <!-- <el-button type="text" @click="exit" style="margin-left: 1000px" class="exit">关闭</el-button>
                  <el-button type="text" @click="add" style="margin-left: 1050px;" >确定</el-button> -->
                  <el-button @click="exit">关闭</el-button>
                  <el-button @click="add">确定</el-button>
                </div>

<!--            {{form}}-->

                </el-dialog>


                <el-dialog v-model="userslist" title="请选择指定用户" width="60%">




                    <el-table
                        ref="multipleTable"
                        :data="user"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                    >
                    <el-table-column type="selection" width="55" />
                    <el-table-column
                        property="id"
                        label="编号"
                        width="150"
                    ></el-table-column>
                    <el-table-column
                        property="username"
                        label="用户名"
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        property="password"
                        label="密码"
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        property="create_time"
                        label="创建时间"
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        property="name"
                        label="部门"
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        property="status"
                        label="状态"
                        width="200"
                    ></el-table-column>

                    </el-table>
                    <!-- <el-button type="text" @click="exit1" style="margin-left: 1000px" class="exit">关闭</el-button>
                    <el-button type="text" @click="exit1" style="margin-left: 1050px;" >确定</el-button> -->
                    <el-button @click="exit1">关闭</el-button>
                  <el-button @click="exit1">确定</el-button>

                </el-dialog>
            </van-col>
         </van-row>
    </div>
</template>

<script>
import headers from '../comm/headers.vue'
// import left from '../comm/left.vue'
import maxios from '../http/axios'
export default {
    components:{
        'headers':headers,
    //     'left':left,
    },
    data() {
        return {
            
            outerVisible:false,
            form:{'priority':'','title':'','stime':'','type':'','etime':'','designate':'','content':'','userlist':[]},
            //选中的指定用户

            //获取用户信息列表
            user:[],
            //弹出层 弹出所有用户
            userslist:false,
            messagelist:[]
        }
    },
    methods: {
        // 将选中用户存在列表中
        handleSelectionChange(val) {
            let arr = []
            for (let i=0;i<val.length;i++){
                if(arr.indexOf(val[i].id,-1)){
                    arr.push(val[i].id)
                }
            }
        this.form.userlist = arr
            // console.log(val)
            //
            // console.log(this.username)

        },
        //关闭选中用户的弹窗
        exit1(){
            this.userslist = false
        },

        //新增按钮
        tianjia(){
            this.outerVisible = true
        },
        //关闭弹出框
        exit(){
            this.outerVisible = false
        },
         // 获取用户
        userlists(){
            maxios('userlist','get').then(res=>{
            //弹出层
            this.userslist = true
            this.user = res.list
            console.log(res.list)
            })
        },

        //  添加按钮
        add(){
            if(this.form.designate==2){
                this.form.userlist = []
            }
            maxios('post_Message','post',this.form).then(res=>{
                if(res.code==200){
                    this.get_message()
                    this.$toast.success(res.msg)
                }else{
                    this.$toast.success(res.msg)
                }
                console.log(res)
            })
        },
        get_message(){
            maxios('post_Message','get',{'userid':localStorage.getItem('userid')}).then(res=>{
                this.messagelist = res.list
                
            })
        },
    },
    created() {
        this.get_message()
    }
}
</script>

<style scoped>
.exit{
  position: relative;
  top: 40px;
}
</style>
